<template>
  <div class='recommend'>
    <div class='title'>热销推荐</div>
    <ul class='recommend-list'>
      <router-link :to="'/detail/'+item.id" class='item border-bottom' v-for="item in recommendList" :key='item.id'>
        <img class='img' :src='item.imgUrl'/>
        <div class='content'>
            <p class='content-title'>{{item.title}}</p>
            <p class='content-desc'>{{item.desc}}</p>
            <button class='btn'>查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  },
  data () {
    return {
      // recommendList: [{
      //   id: '0001',
      //   imgUrl: 'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_140x140_80f63803.jpg',
      //   title: '故宫',
      //   desc: '东方宫殿建筑代表，世界宫殿建筑典范'
      // }, {
      //   id: '0002',
      //   imgUrl: 'http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_140x140_abb362a7.jpg',
      //   title: '南山滑雪场',
      //   desc: '北京专业级滑雪圣地'
      // }]
    }
  }
}
</script>
<style lang='stylus' scoped>
    @import '~styles/variables.styl'
    @import '~styles/mixins.styl'
    .title
        line-height :.8rem
        background :#eee
        color: $darkTextColor
        text-indent:.2rem
    .item
        display :flex
        padding:.1rem
        height 1.9rem
        overflow :hidden
        box-sizing:border-box
        .img
            width:1.7rem
            height:1.7rem
        .content
            flex:1
            margin-left:.1rem
            min-width :0
            .content-title
                line-height:.6rem
                font-size:.32rem
                font-weight:700
                color:#333
            .content-desc
                color:#ccc
                line-height :.4rem
                ellipsis()
            .btn
                background :#25c9d0
                padding:0 .2rem
                border-radius:.06rem
                color:#fff
                margin-top:.1rem
</style>
